import Clay from '@csii/vx-clay/dist/clay-template.js';

function initConfig(attr, that) {
  if (attr.cx === -1) {
    attr.cx = that._width * 0.5;
  }
  if (attr.cy === -1) {
    attr.cy = that._height * 0.5;
  }
}

Clay.series('ui-user-overview', [
  'number',
  'json',
  '$rotate',
  function ($number, $json, $rotate) {
    return {
      attrs: {
        cx: $number(-1),
        cy: $number(-1),
        data: $json(),
        outerRadius: $number(100),
        innerRadius: $number(70),
      },
      region: {
        default: function (render, attr) {
          // 绘制交互区域
          initConfig(attr, this);
          let all = attr.data.internalUser + attr.data.externalUser;
          if (attr.data.internalUser === 0 && attr.data.externalUser === 0) {
            return;
          } else if (attr.data.externalUser === 0) {
            // 绘制公司内部用户
            render('0').fillArc(attr.cx, attr.cy, attr.innerRadius, attr.outerRadius, -0.5 * Math.PI, Math.PI * 2);
          } else if (attr.data.internalUser === 0) {
            // 绘制公司外部用户
            render('1').fillArc(attr.cx, attr.cy, attr.innerRadius, attr.outerRadius, -0.5 * Math.PI, Math.PI * 2);
          } else {
            let innerArcStart = $rotate(attr.cx, attr.cy, Math.PI / 36, attr.cx, attr.cy - attr.innerRadius);
            let innerArcEnd = $rotate(
              attr.cx,
              attr.cy,
              Math.PI / 36 + (attr.data.internalUser / all) * (2 * Math.PI - Math.PI / 9),
              attr.cx,
              attr.cy - attr.innerRadius,
            );

            // 绘制公司内部用户
            render('0').fillArc(
              attr.cx,
              attr.cy,
              attr.innerRadius,
              attr.outerRadius,
              -0.5 * Math.PI + Math.PI / 36,
              (attr.data.internalUser / all) * (2 * Math.PI - Math.PI / 9),
            );

            render('0').fillArc(innerArcStart[0], innerArcStart[1], 0, attr.outerRadius - attr.innerRadius, -0.5 * Math.PI, Math.PI / 18);
            render('0').fillArc(
              innerArcEnd[0],
              innerArcEnd[1],
              0,
              attr.outerRadius - attr.innerRadius,
              -0.5 * Math.PI + Math.PI / 36 + (attr.data.internalUser / all) * (2 * Math.PI - Math.PI / 9) - Math.PI / 36,
              Math.PI / 18,
            );

            // 绘制公司外部用户
            let outerArcStart = $rotate(
              attr.cx,
              attr.cy,
              Math.PI / 36 + (attr.data.internalUser / all) * (2 * Math.PI - Math.PI / 9) + Math.PI / 18,
              attr.cx,
              attr.cy - attr.innerRadius,
            );

            let outerArcEnd = $rotate(attr.cx, attr.cy, -Math.PI / 36, attr.cx, attr.cy - attr.innerRadius);
            render('1').fillArc(
              attr.cx,
              attr.cy,
              attr.innerRadius,
              attr.outerRadius,
              -0.5 * Math.PI + Math.PI / 36 + Math.PI / 18 + (attr.data.internalUser / all) * (2 * Math.PI - Math.PI / 9),
              (attr.data.externalUser / all) * (2 * Math.PI - Math.PI / 9),
            );

            render('1').fillArc(
              outerArcStart[0],
              outerArcStart[1],
              0,
              attr.outerRadius - attr.innerRadius,
              -0.5 * Math.PI + Math.PI / 36 + Math.PI / 18 + (attr.data.internalUser / all) * (2 * Math.PI - Math.PI / 9) + Math.PI / 36,
              -Math.PI / 18,
            );
            render('1').fillArc(outerArcEnd[0], outerArcEnd[1], 0, attr.outerRadius - attr.innerRadius, -0.5 * Math.PI, -Math.PI / 18);
          }
        },
      },
      link: function (painter, attr) {
        // 初始化配置
        initConfig(attr, this);
        let all = attr.data.internalUser + attr.data.externalUser;
        if (attr.data.internalUser === 0 && attr.data.externalUser === 0) {
          return;
        } else if (attr.data.externalUser === 0) {
          // 绘制公司内部用户
          painter.config({
            fillStyle: '#f6b145',
          });
          painter.fillArc(attr.cx, attr.cy, attr.innerRadius, attr.outerRadius, -0.5 * Math.PI, Math.PI * 2);
        } else if (attr.data.internalUser === 0) {
          // 绘制公司外部用户
          painter.config({
            fillStyle: '#44cfb8',
          });
          painter.fillArc(attr.cx, attr.cy, attr.innerRadius, attr.outerRadius, -0.5 * Math.PI, Math.PI * 2);
        } else {
          let innerArcStart = $rotate(attr.cx, attr.cy, Math.PI / 36, attr.cx, attr.cy - attr.innerRadius);
          let innerArcEnd = $rotate(
            attr.cx,
            attr.cy,
            Math.PI / 36 + (attr.data.internalUser / all) * (2 * Math.PI - Math.PI / 9),
            attr.cx,
            attr.cy - attr.innerRadius,
          );

          // 绘制公司内部用户
          painter.config({
            fillStyle: '#f6b145',
          });

          painter.fillArc(
            attr.cx,
            attr.cy,
            attr.innerRadius,
            attr.outerRadius,
            -0.5 * Math.PI + Math.PI / 36,
            (attr.data.internalUser / all) * (2 * Math.PI - Math.PI / 9),
          );

          painter.fillArc(innerArcStart[0], innerArcStart[1], 0, attr.outerRadius - attr.innerRadius, -0.5 * Math.PI, Math.PI / 18);
          painter.fillArc(
            innerArcEnd[0],
            innerArcEnd[1],
            0,
            attr.outerRadius - attr.innerRadius,
            -0.5 * Math.PI + Math.PI / 36 + (attr.data.internalUser / all) * (2 * Math.PI - Math.PI / 9) - Math.PI / 36,
            Math.PI / 18,
          );

          // 绘制公司外部用户
          let outerArcStart = $rotate(
            attr.cx,
            attr.cy,
            Math.PI / 36 + (attr.data.internalUser / all) * (2 * Math.PI - Math.PI / 9) + Math.PI / 18,
            attr.cx,
            attr.cy - attr.innerRadius,
          );

          let outerArcEnd = $rotate(attr.cx, attr.cy, -Math.PI / 36, attr.cx, attr.cy - attr.innerRadius);

          painter.config({
            fillStyle: '#44cfb8',
          });

          painter.fillArc(
            attr.cx,
            attr.cy,
            attr.innerRadius,
            attr.outerRadius,
            -0.5 * Math.PI + Math.PI / 36 + Math.PI / 18 + (attr.data.internalUser / all) * (2 * Math.PI - Math.PI / 9),
            (attr.data.externalUser / all) * (2 * Math.PI - Math.PI / 9),
          );

          painter.fillArc(
            outerArcStart[0],
            outerArcStart[1],
            0,
            attr.outerRadius - attr.innerRadius,
            -0.5 * Math.PI + Math.PI / 36 + Math.PI / 18 + (attr.data.internalUser / all) * (2 * Math.PI - Math.PI / 9) + Math.PI / 36,
            -Math.PI / 18,
          );
          painter.fillArc(outerArcEnd[0], outerArcEnd[1], 0, attr.outerRadius - attr.innerRadius, -0.5 * Math.PI, -Math.PI / 18);
        }
      },
    };
  },
]);
